<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07 Element对象</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/highlight.default.min.css">

    <script src="../static/js/marked.min.js"></script>
    <script src="../static/js/highlight.min.js"></script>
</head>

<body>
    <div id="content"></div>
    <script>
        const renderer = new marked.Renderer();
        renderer.code = function (code, language) {
            language = language || 'plaintext';
            const highlighted = hljs.highlight(code, { language }).value;
            return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`;
        };

        fetch('./07 Element对象.md')
            .then(response => response.text())
            .then(markdown => {
                const html = marked.parse(markdown, { renderer });
                document.getElementById('content').innerHTML = html;
                document.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightBlock(block);
                });
            });
    </script>

    <hr>
    
    <div class="example">
        <p><strong>示例元素区域</strong></p>

        <span id="myDiv1">示例元素1</span><span style="font-family: Kaiti;">（观察元素的 class 属性值）</span>
        <br>
        <span class="myDiv2">示例元素2</span><span style="font-family: Kaiti;">（原本值：示例元素2）</span>
        <br>
        <span class="myDiv2">示例元素2</span><span style="font-family: Kaiti;">（原本值：示例元素2）</span>
    </div>

    <div class="explain">
        <p><code>document.getElementsByClassName</code> 返回的是一个
            <code>HTMLCollection</code>，这是一个<strong>类数组对象</strong>（这是一个类似数组的对象，但并不是一个真正的数组），它包含所有匹配的元素。
        </p>
        <p>对于类数组对象，不能直接对它们使用 <code>.innerHTML</code> 或 <code>.classList</code> 这样的属性，因为这些属性是针对<strong>单个元素</strong>的。
        </p>
        <p>你需要通过索引（或索引等方式）来访问特定的元素，然后使用 <code>.innerHTML</code> 或 <code>.classList</code>方法。</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {  // 等待网页加载完成后再执行
            var div1 = document.getElementById('myDiv1');

            div1.classList.add('myCssClass');
            div1.classList.add('foo', 'bar');
            div1.classList.remove('myCssClass');
            div1.classList.toggle('myCssClass'); // 如果 myCssClass 不存在就加入，否则移除
            console.log(div1.classList.contains('myCssClass')); // 返回 true 或者 false

            var div2Collection = document.getElementsByClassName("myDiv2")
            console.log("div2Collection:\t", div2Collection);
            console.log("div2Collection.innerHTML:\t", div2Collection.innerHTML);
            console.log("div2Collection.innerText:\t", div2Collection.innerText);

            for (var i = 0; i < div2Collection.length; i++) {
                var div2 = div2Collection[i];
                console.log(div2.innerHTML);
                console.log(div2.innerText);
                div2.innerHTML = "这是将示例元素的 text 修改后的内容";
            }
        })
    </script>
</body>

</html>